<template>
  <!-- 首页轮播图 -->
  <div class="swiper">
    <swiper ref="mySwiper" :options="swiperOptions" class="swiper-outside">
      <swiper-slide>
        <img src="@/assets/img/home_swiper/banner_01.jpg" />
      </swiper-slide>
      <swiper-slide>
        <img src="@/assets/img/home_swiper/banner_02.jpg" />
      </swiper-slide>
      <swiper-slide>
        <img src="@/assets/img/home_swiper/banner_03.jpg" />
      </swiper-slide>
       <swiper-slide>
        <img src="@/assets/img/home_swiper/banner_04.jpg" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

    <!-- 搜索框组件 -->
    <header-select></header-select>
  </div>
</template>
<script>
import HeaderSelect from "./header-select"; //头部搜索框组件
export default {
  name: "SwiperSlider",
  data() {
    return {
      swiperOptions: {
        autoplay: {//自动轮播
          delay: 2000,//3s一轮波
          disableOnInteraction: false
        },
        speed: 2000,//滑动时间
        pagination: {
          el: ".swiper-pagination",
          clickable :true,//点击按钮切换
        },
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        loop: true

        // Some Swiper option/callback...
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    }
  },
  mounted() {
    // console.log("Current Swiper instance object", this.swiper);
    this.swiper.slideTo(1, 3000, false);
  },
  components: { HeaderSelect }
};
</script>
<style lang='scss' scoped>
.swiper {

  position: relative;
  .swiper-outside {
    img {
      width: 100%;
    }
  }
  .swiper-pagination {
    bottom: 51px;
    /deep/ .swiper-pagination-bullet0 {
      height: 1px;
      width: 28px;
      background-color: #ffffff;
      cursor: pointer;
    }
  }
}
</style>